<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Example Applications | Loading Bar</title>

    <meta name="example-screenshot-delay" content="0" />

    <style type="text/css">
      #mynetwork {
        width: 900px;
        height: 900px;
        border: 1px solid lightgray;
      }
      #loadingBar {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 902px;
        height: 902px;
        background-color: rgba(200, 200, 200, 0.8);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        opacity: 1;
      }
      #wrapper {
        position: relative;
        width: 900px;
        height: 900px;
      }

      #text {
        position: absolute;
        top: 8px;
        left: 530px;
        width: 30px;
        height: 50px;
        margin: auto auto auto auto;
        font-size: 22px;
        color: #000000;
      }

      div.outerBorder {
        position: relative;
        top: 400px;
        width: 600px;
        height: 44px;
        margin: auto auto auto auto;
        border: 8px solid rgba(0, 0, 0, 0.1);
        background: rgb(252, 252, 252); /* Old browsers */
        background: -moz-linear-gradient(
          top,
          rgba(252, 252, 252, 1) 0%,
          rgba(237, 237, 237, 1) 100%
        ); /* FF3.6+ */
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0%, rgba(252, 252, 252, 1)),
          color-stop(100%, rgba(237, 237, 237, 1))
        ); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(
          top,
          rgba(252, 252, 252, 1) 0%,
          rgba(237, 237, 237, 1) 100%
        ); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(
          top,
          rgba(252, 252, 252, 1) 0%,
          rgba(237, 237, 237, 1) 100%
        ); /* Opera 11.10+ */
        background: -ms-linear-gradient(
          top,
          rgba(252, 252, 252, 1) 0%,
          rgba(237, 237, 237, 1) 100%
        ); /* IE10+ */
        background: linear-gradient(
          to bottom,
          rgba(252, 252, 252, 1) 0%,
          rgba(237, 237, 237, 1) 100%
        ); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        border-radius: 72px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      }

      #border {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 500px;
        height: 23px;
        margin: auto auto auto auto;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
      }

      #bar {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 20px;
        height: 20px;
        margin: auto auto auto auto;
        border-radius: 11px;
        border: 2px solid rgba(30, 30, 30, 0.05);
        background: rgb(0, 173, 246); /* Old browsers */
        box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.4);
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script type="text/javascript">
      function draw() {
        // create some nodes
        var nodes = [
          { id: 0, label: "Myriel", group: 1 },
          { id: 1, label: "Napoleon", group: 1 },
          { id: 2, label: "Mlle.Baptistine", group: 1 },
          { id: 3, label: "Mme.Magloire", group: 1 },
          { id: 4, label: "CountessdeLo", group: 1 },
          { id: 5, label: "Geborand", group: 1 },
          { id: 6, label: "Champtercier", group: 1 },
          { id: 7, label: "Cravatte", group: 1 },
          { id: 8, label: "Count", group: 1 },
          { id: 9, label: "OldMan", group: 1 },
          { id: 10, label: "Labarre", group: 2 },
          { id: 11, label: "Valjean", group: 2 },
          { id: 12, label: "Marguerite", group: 3 },
          { id: 13, label: "Mme.deR", group: 2 },
          { id: 14, label: "Isabeau", group: 2 },
          { id: 15, label: "Gervais", group: 2 },
          { id: 16, label: "Tholomyes", group: 3 },
          { id: 17, label: "Listolier", group: 3 },
          { id: 18, label: "Fameuil", group: 3 },
          { id: 19, label: "Blacheville", group: 3 },
          { id: 20, label: "Favourite", group: 3 },
          { id: 21, label: "Dahlia", group: 3 },
          { id: 22, label: "Zephine", group: 3 },
          { id: 23, label: "Fantine", group: 3 },
          { id: 24, label: "Mme.Thenardier", group: 4 },
          { id: 25, label: "Thenardier", group: 4 },
          { id: 26, label: "Cosette", group: 5 },
          { id: 27, label: "Javert", group: 4 },
          { id: 28, label: "Fauchelevent", group: 0 },
          { id: 29, label: "Bamatabois", group: 2 },
          { id: 30, label: "Perpetue", group: 3 },
          { id: 31, label: "Simplice", group: 2 },
          { id: 32, label: "Scaufflaire", group: 2 },
          { id: 33, label: "Woman1", group: 2 },
          { id: 34, label: "Judge", group: 2 },
          { id: 35, label: "Champmathieu", group: 2 },
          { id: 36, label: "Brevet", group: 2 },
          { id: 37, label: "Chenildieu", group: 2 },
          { id: 38, label: "Cochepaille", group: 2 },
          { id: 39, label: "Pontmercy", group: 4 },
          { id: 40, label: "Boulatruelle", group: 6 },
          { id: 41, label: "Eponine", group: 4 },
          { id: 42, label: "Anzelma", group: 4 },
          { id: 43, label: "Woman2", group: 5 },
          { id: 44, label: "MotherInnocent", group: 0 },
          { id: 45, label: "Gribier", group: 0 },
          { id: 46, label: "Jondrette", group: 7 },
          { id: 47, label: "Mme.Burgon", group: 7 },
          { id: 48, label: "Gavroche", group: 8 },
          { id: 49, label: "Gillenormand", group: 5 },
          { id: 50, label: "Magnon", group: 5 },
          { id: 51, label: "Mlle.Gillenormand", group: 5 },
          { id: 52, label: "Mme.Pontmercy", group: 5 },
          { id: 53, label: "Mlle.Vaubois", group: 5 },
          { id: 54, label: "Lt.Gillenormand", group: 5 },
          { id: 55, label: "Marius", group: 8 },
          { id: 56, label: "BaronessT", group: 5 },
          { id: 57, label: "Mabeuf", group: 8 },
          { id: 58, label: "Enjolras", group: 8 },
          { id: 59, label: "Combeferre", group: 8 },
          { id: 60, label: "Prouvaire", group: 8 },
          { id: 61, label: "Feuilly", group: 8 },
          { id: 62, label: "Courfeyrac", group: 8 },
          { id: 63, label: "Bahorel", group: 8 },
          { id: 64, label: "Bossuet", group: 8 },
          { id: 65, label: "Joly", group: 8 },
          { id: 66, label: "Grantaire", group: 8 },
          { id: 67, label: "MotherPlutarch", group: 9 },
          { id: 68, label: "Gueulemer", group: 4 },
          { id: 69, label: "Babet", group: 4 },
          { id: 70, label: "Claquesous", group: 4 },
          { id: 71, label: "Montparnasse", group: 4 },
          { id: 72, label: "Toussaint", group: 5 },
          { id: 73, label: "Child1", group: 10 },
          { id: 74, label: "Child2", group: 10 },
          { id: 75, label: "Brujon", group: 4 },
          { id: 76, label: "Mme.Hucheloup", group: 8 },
        ];

        // create some edges
        var edges = [
          { from: 1, to: 0 },
          { from: 2, to: 0 },
          { from: 3, to: 0 },
          { from: 3, to: 2 },
          { from: 4, to: 0 },
          { from: 5, to: 0 },
          { from: 6, to: 0 },
          { from: 7, to: 0 },
          { from: 8, to: 0 },
          { from: 9, to: 0 },
          { from: 11, to: 10 },
          { from: 11, to: 3 },
          { from: 11, to: 2 },
          { from: 11, to: 0 },
          { from: 12, to: 11 },
          { from: 13, to: 11 },
          { from: 14, to: 11 },
          { from: 15, to: 11 },
          { from: 17, to: 16 },
          { from: 18, to: 16 },
          { from: 18, to: 17 },
          { from: 19, to: 16 },
          { from: 19, to: 17 },
          { from: 19, to: 18 },
          { from: 20, to: 16 },
          { from: 20, to: 17 },
          { from: 20, to: 18 },
          { from: 20, to: 19 },
          { from: 21, to: 16 },
          { from: 21, to: 17 },
          { from: 21, to: 18 },
          { from: 21, to: 19 },
          { from: 21, to: 20 },
          { from: 22, to: 16 },
          { from: 22, to: 17 },
          { from: 22, to: 18 },
          { from: 22, to: 19 },
          { from: 22, to: 20 },
          { from: 22, to: 21 },
          { from: 23, to: 16 },
          { from: 23, to: 17 },
          { from: 23, to: 18 },
          { from: 23, to: 19 },
          { from: 23, to: 20 },
          { from: 23, to: 21 },
          { from: 23, to: 22 },
          { from: 23, to: 12 },
          { from: 23, to: 11 },
          { from: 24, to: 23 },
          { from: 24, to: 11 },
          { from: 25, to: 24 },
          { from: 25, to: 23 },
          { from: 25, to: 11 },
          { from: 26, to: 24 },
          { from: 26, to: 11 },
          { from: 26, to: 16 },
          { from: 26, to: 25 },
          { from: 27, to: 11 },
          { from: 27, to: 23 },
          { from: 27, to: 25 },
          { from: 27, to: 24 },
          { from: 27, to: 26 },
          { from: 28, to: 11 },
          { from: 28, to: 27 },
          { from: 29, to: 23 },
          { from: 29, to: 27 },
          { from: 29, to: 11 },
          { from: 30, to: 23 },
          { from: 31, to: 30 },
          { from: 31, to: 11 },
          { from: 31, to: 23 },
          { from: 31, to: 27 },
          { from: 32, to: 11 },
          { from: 33, to: 11 },
          { from: 33, to: 27 },
          { from: 34, to: 11 },
          { from: 34, to: 29 },
          { from: 35, to: 11 },
          { from: 35, to: 34 },
          { from: 35, to: 29 },
          { from: 36, to: 34 },
          { from: 36, to: 35 },
          { from: 36, to: 11 },
          { from: 36, to: 29 },
          { from: 37, to: 34 },
          { from: 37, to: 35 },
          { from: 37, to: 36 },
          { from: 37, to: 11 },
          { from: 37, to: 29 },
          { from: 38, to: 34 },
          { from: 38, to: 35 },
          { from: 38, to: 36 },
          { from: 38, to: 37 },
          { from: 38, to: 11 },
          { from: 38, to: 29 },
          { from: 39, to: 25 },
          { from: 40, to: 25 },
          { from: 41, to: 24 },
          { from: 41, to: 25 },
          { from: 42, to: 41 },
          { from: 42, to: 25 },
          { from: 42, to: 24 },
          { from: 43, to: 11 },
          { from: 43, to: 26 },
          { from: 43, to: 27 },
          { from: 44, to: 28 },
          { from: 44, to: 11 },
          { from: 45, to: 28 },
          { from: 47, to: 46 },
          { from: 48, to: 47 },
          { from: 48, to: 25 },
          { from: 48, to: 27 },
          { from: 48, to: 11 },
          { from: 49, to: 26 },
          { from: 49, to: 11 },
          { from: 50, to: 49 },
          { from: 50, to: 24 },
          { from: 51, to: 49 },
          { from: 51, to: 26 },
          { from: 51, to: 11 },
          { from: 52, to: 51 },
          { from: 52, to: 39 },
          { from: 53, to: 51 },
          { from: 54, to: 51 },
          { from: 54, to: 49 },
          { from: 54, to: 26 },
          { from: 55, to: 51 },
          { from: 55, to: 49 },
          { from: 55, to: 39 },
          { from: 55, to: 54 },
          { from: 55, to: 26 },
          { from: 55, to: 11 },
          { from: 55, to: 16 },
          { from: 55, to: 25 },
          { from: 55, to: 41 },
          { from: 55, to: 48 },
          { from: 56, to: 49 },
          { from: 56, to: 55 },
          { from: 57, to: 55 },
          { from: 57, to: 41 },
          { from: 57, to: 48 },
          { from: 58, to: 55 },
          { from: 58, to: 48 },
          { from: 58, to: 27 },
          { from: 58, to: 57 },
          { from: 58, to: 11 },
          { from: 59, to: 58 },
          { from: 59, to: 55 },
          { from: 59, to: 48 },
          { from: 59, to: 57 },
          { from: 60, to: 48 },
          { from: 60, to: 58 },
          { from: 60, to: 59 },
          { from: 61, to: 48 },
          { from: 61, to: 58 },
          { from: 61, to: 60 },
          { from: 61, to: 59 },
          { from: 61, to: 57 },
          { from: 61, to: 55 },
          { from: 62, to: 55 },
          { from: 62, to: 58 },
          { from: 62, to: 59 },
          { from: 62, to: 48 },
          { from: 62, to: 57 },
          { from: 62, to: 41 },
          { from: 62, to: 61 },
          { from: 62, to: 60 },
          { from: 63, to: 59 },
          { from: 63, to: 48 },
          { from: 63, to: 62 },
          { from: 63, to: 57 },
          { from: 63, to: 58 },
          { from: 63, to: 61 },
          { from: 63, to: 60 },
          { from: 63, to: 55 },
          { from: 64, to: 55 },
          { from: 64, to: 62 },
          { from: 64, to: 48 },
          { from: 64, to: 63 },
          { from: 64, to: 58 },
          { from: 64, to: 61 },
          { from: 64, to: 60 },
          { from: 64, to: 59 },
          { from: 64, to: 57 },
          { from: 64, to: 11 },
          { from: 65, to: 63 },
          { from: 65, to: 64 },
          { from: 65, to: 48 },
          { from: 65, to: 62 },
          { from: 65, to: 58 },
          { from: 65, to: 61 },
          { from: 65, to: 60 },
          { from: 65, to: 59 },
          { from: 65, to: 57 },
          { from: 65, to: 55 },
          { from: 66, to: 64 },
          { from: 66, to: 58 },
          { from: 66, to: 59 },
          { from: 66, to: 62 },
          { from: 66, to: 65 },
          { from: 66, to: 48 },
          { from: 66, to: 63 },
          { from: 66, to: 61 },
          { from: 66, to: 60 },
          { from: 67, to: 57 },
          { from: 68, to: 25 },
          { from: 68, to: 11 },
          { from: 68, to: 24 },
          { from: 68, to: 27 },
          { from: 68, to: 48 },
          { from: 68, to: 41 },
          { from: 69, to: 25 },
          { from: 69, to: 68 },
          { from: 69, to: 11 },
          { from: 69, to: 24 },
          { from: 69, to: 27 },
          { from: 69, to: 48 },
          { from: 69, to: 41 },
          { from: 70, to: 25 },
          { from: 70, to: 69 },
          { from: 70, to: 68 },
          { from: 70, to: 11 },
          { from: 70, to: 24 },
          { from: 70, to: 27 },
          { from: 70, to: 41 },
          { from: 70, to: 58 },
          { from: 71, to: 27 },
          { from: 71, to: 69 },
          { from: 71, to: 68 },
          { from: 71, to: 70 },
          { from: 71, to: 11 },
          { from: 71, to: 48 },
          { from: 71, to: 41 },
          { from: 71, to: 25 },
          { from: 72, to: 26 },
          { from: 72, to: 27 },
          { from: 72, to: 11 },
          { from: 73, to: 48 },
          { from: 74, to: 48 },
          { from: 74, to: 73 },
          { from: 75, to: 69 },
          { from: 75, to: 68 },
          { from: 75, to: 25 },
          { from: 75, to: 48 },
          { from: 75, to: 41 },
          { from: 75, to: 70 },
          { from: 75, to: 71 },
          { from: 76, to: 64 },
          { from: 76, to: 65 },
          { from: 76, to: 66 },
          { from: 76, to: 63 },
          { from: 76, to: 62 },
          { from: 76, to: 48 },
          { from: 76, to: 58 },
        ];

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {
          nodes: {
            shape: "dot",
            size: 16,
          },
          layout: {
            randomSeed: 34,
          },
          physics: {
            forceAtlas2Based: {
              gravitationalConstant: -26,
              centralGravity: 0.005,
              springLength: 230,
              springConstant: 0.18,
            },
            maxVelocity: 146,
            solver: "forceAtlas2Based",
            timestep: 0.35,
            stabilization: {
              enabled: true,
              iterations: 2000,
              updateInterval: 25,
            },
          },
        };
        var network = new vis.Network(container, data, options);

        network.on("stabilizationProgress", function (params) {
          var maxWidth = 496;
          var minWidth = 20;
          var widthFactor = params.iterations / params.total;
          var width = Math.max(minWidth, maxWidth * widthFactor);

          document.getElementById("bar").style.width = width + "px";
          document.getElementById("text").innerText =
            Math.round(widthFactor * 100) + "%";
        });
        network.once("stabilizationIterationsDone", function () {
          document.getElementById("text").innerText = "100%";
          document.getElementById("bar").style.width = "496px";
          document.getElementById("loadingBar").style.opacity = 0;
          // really clean the dom element
          setTimeout(function () {
            document.getElementById("loadingBar").style.display = "none";
          }, 500);
        });
      }
    </script>
  </head>

  <body onload="draw()">
    <p>
      With the new stabilization events you can implement your own custom
      loading bar for all those long loading times!
    </p>

    <div id="wrapper">
      <div id="mynetwork"></div>
      <div id="loadingBar">
        <div class="outerBorder">
          <div id="text">0%</div>
          <div id="border">
            <div id="bar"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
